<template>
  <div class="app-container">
<!--    搜索框表单-->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="省">
        <el-select v-model="queryParams.province" placeholder="省" style="width: 240px" clearable>
          <el-option label="四川省" value="四川省"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="queryParams.city" placeholder="市" style="width: 240px" clearable>
          <el-option label="成都市" value="成都市"></el-option>
          <el-option label="内江市" value="内江市"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县">
        <el-select v-model="queryParams.area" placeholder="区" style="width: 240px" clearable>
          <el-option label="郫都区" value="郫都区"></el-option>
          <el-option label="锦江区" value="锦江区"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街道">
        <el-select v-model="queryParams.detailAddress" placeholder="活动区域" style="width: 240px" clearable>
          <el-option label="郫筒街道" value="郫筒街道"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自助服务点名称">
        <el-input v-model="queryParams.posName" placeholder="自助服务点名称" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="序列号">
        <el-input v-model="queryParams.serialCode" placeholder="序列号" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="状态" style="width: 240px" clearable>
          <el-option label="可用" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetQueryParams">重置</el-button>
      </el-form-item>
    </el-form>

<!--    按钮组-->
    <el-row>
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      <el-button type="success" plain icon="el-icon-edit" size="mini"
                 :disabled="multipleSelection.length !== 1"
                 @click="handleUpdate(multipleSelection[0])">修改</el-button>
      <el-button type="danger" plain icon="el-icon-delete" size="mini"
                 @click="handleBatchDelete"
                 :disabled="multipleSelection.length === 0">删除</el-button>
      <el-button type="warning" plain icon="el-icon-download" size="mini"
                 :disabled="multipleSelection.length === 0">导出</el-button>
    </el-row>

    <br>
<!--    数据展示的表格-->
    <el-table
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="width: 100%">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="province"
        label="省"
        >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市"
        >
      </el-table-column>
      <el-table-column
        prop="area"
        label="区">
      </el-table-column>
      <el-table-column
        prop="country"
        label="街道">
      </el-table-column>
      <el-table-column
        prop="detailAddress"
        label="详细地址">
      </el-table-column>
      <el-table-column
        prop="posName"
        label="自助服务点名称"
        width="240px">
      </el-table-column>
      <el-table-column
        prop="serialCode"
        label="序列号">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleUpdate(scope.row)" style="margin-right: 3px">编辑</el-button>
<!--          <el-button type="text" size="small" >删除</el-button>-->
          <el-popconfirm
            title="确定删除此服务点吗？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />







    <el-dialog title="操作自助服务点" :visible.sync="dialogFormVisible" width="700px" >
      <el-form :model="form" label-width="auto" :rules="rules" ref="posForm">
        <el-form-item label="省" prop="province">
          <el-select v-model='form.province' filterable placeholder="请选择省" >
            <el-option label="四川省" value="四川省"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model='form.city' filterable placeholder="请选择市(请先选择省)" >
            <el-option label="成都市" value="成都市"></el-option>
            <el-option label="内江市" value="内江市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="area">
          <el-select v-model='form.area' filterable placeholder="请选择区/县(请先选择市)" >
            <el-option label="郫都区" value="郫都区"></el-option>
            <el-option label="锦江区" value="锦江区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇/街道" prop="country">
          <el-select v-model='form.country' filterable placeholder="请选择乡镇/街道(请先选择区/县)" >
            <el-option label="郫筒街道" value="郫筒街道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="自主服务点名称" prop="posName">
          <el-input v-model="form.posName" placeholder="请输入自主服务点名称" />
        </el-form-item>
        <el-form-item label="序列号" prop="serialCode">
          <el-input v-model="form.serialCode" placeholder="请输入序列号" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button :label="0">可用</el-radio-button>
            <el-radio-button :label="1">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrSetPos">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script
>
import request from "@/utils/request";
export default {
  name: "Pos",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      total: 100,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        province: '',
        city: '',
        area: '',
        detailAddress: '',
        serialCode: '',
        posName: '',
        status: '',
      },
      tableData: [],
      multipleSelection: [],

      dialogFormVisible: false,
      form: {
        id: null,
        province: null,
        city: null,
        area: null,
        country: null,
        detailAddress: null,
        posName: null,
        serialCode: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      formLabelWidth: '120px',

      rules: {
        province: [
          {required: true, message: '请选择省份', trigger: 'blur'},
        ],
        city: [
          {required: true, message: '请选择城市', trigger: 'blur'},
        ],
        area: [
          {required: true, message: '请选择区县', trigger: 'blur'},
        ],
        country: [
          {required: true, message: '请选择街道', trigger: 'blur'},
        ],
        posName: [
          {required: true, message: '请输入自主服务点名称', trigger: 'blur'},
        ],
        serialCode: [
          {required: true, message: '请输入序列号', trigger: 'blur'},
        ],
      }
    };
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getList() {
      request({
        url: "/nongjt/pos/list",
        method: 'get',
        params: this.queryParams
      }).then(res=>{
        this.tableData = res.rows;
        this.total = res.total
      })
    },
    resetQueryParams(){

      let params = {
        province: '',
        city: '',
        area: '',
        detailAddress: '',
        serialCode: '',
        posName: '',
        status: '',
      }

      Object.assign(this.queryParams, params)
    },
    reset(){
      this.form = {
        id: null,
        province: null,
        city: null,
        area: null,
        country: null,
        detailAddress: null,
        posName: null,
        serialCode: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
    },
    handleAdd() {
      //每次新增都重置表单
      this.reset();
      this.dialogFormVisible = true;
    },
    handleUpdate(row){
      this.form = Object.assign({}, row)
      this.dialogFormVisible = true
    },
    handleBatchDelete() {
      if(this.multipleSelection.length === 0){
        return
      }
      let ids =  this.multipleSelection.map(item => item.id);
      let that = this
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function() {
        that.deletePos(ids);
      })
    },
    handleDelete(row){
      this.deletePos([row.id])
    },
    deletePos(ids){
      request({
        url: "/nongjt/pos/" + ids,
        method: 'delete',
      }).then(res=>{
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getList()
      }).catch((err) => {
        this.$message({
          message: '删除失败',
          type: 'error'
        });
      })
    },
    addOrSetPos() {
      this.$refs['posForm'].validate((valid) => {
        if (valid) {
          if(this.form.id){
            request({
              url: "/nongjt/pos",
              method: 'put',
              data: this.form
            }).then(res=>{
              this.reset()
              this.getList()
              this.dialogFormVisible = false
            })
          }else{
            request({
              url: "/nongjt/pos",
              method: 'post',
              data: this.form
            }).then(res=>{
              this.reset()
              this.getList()
              this.dialogFormVisible = false
            })
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
